<template>
  <a-modal
      centered
      width="80%"
      :visible="runLotsDefeDetailModalVisible"
      :title="siteId"
      @cancel="defeModalDetailCancel"
      :okText="$t('btn.confirm')"
      :cancelText="$t('btn.cancel')"
      @ok="defeModalDetailConfirm"
  >

    <a-row>
      <a-table
              size="small"
          bordered
          :selection="true"
          :row-selection="rowSelection"
          :rowKey="(record,index)=>{return record.key}"
          :pagination="defeDetailPagination"
          :dataSource="defeDetailDataSource"
          :scroll="{y:windowHeight - 300 ,x:'100%'}"
          :columns="columns"

      >
        <template slot="dieNo" slot-scope="text, record">
          <a-input  v-model="record.dieNo"  @blur="getDieCnt(record)"></a-input>
        </template>
        <template slot="remark" slot-scope="text, record">
          <a-input v-model="record.remark"></a-input>
        </template>
        <template slot="dieCnt" slot-scope="text, record">
          <a-input v-model="record.dieCnt" disabled @change="(val) => refresh(val, record.dieCnt)"></a-input>
        </template>

        <template slot="dieLayer" slot-scope="text, record">
         <a-col>
           <a-select
               v-model="record.dieLayer"
               show-search
               showArrow
               style="width:100%"
           >
             <a-select-option v-for="item in dieLayerList" :key="item.value">
               {{ item.label}}
             </a-select-option>
           </a-select>
         </a-col>

        </template>
        <template slot="dieCode" slot-scope="text, record">
          <a-select
              v-model="record.dieCode"
              show-search
              showArrow
              style="width:100%"
          >
            <a-select-option v-for="item in dieCodeList" :key="item.value">
              {{ item.label}}
            </a-select-option>
          </a-select>
        </template>

        <template slot="operation" slot-scope="text, record">
          <a-space>
            <a-button size="small" v-has="'btn_copyDefe'" type="primary" @click="copyDefe(record)" >{{$t('btn.add')}}</a-button>
            <a-button size="small" v-has="'btn_deleteDefe'" type="danger" @click="deleteDefe(record)" >{{$t('btn.delete')}}</a-button>
          </a-space>
        </template>
      </a-table>
    </a-row>
    <a-row style="margin-top: 9px">
      <a-button type="primary" v-has="'btn_addDetail'" @click="addDetail">{{ $t('menuItem.addDetail') }}</a-button>
    </a-row>
    <a-row style="margin-top: 9px">
      <span>{{ $t('menuItem.diePlaceholder') }}</span>
    </a-row>
  </a-modal>


</template>

<script>
import {mapMutations, mapState} from "vuex";
import {message} from "ant-design-vue";
import SendMsg from "@/api/SendMsg";

export default {
name: "RunLotDefeDetailModal",
  data() {
    return {
      columns: [
        {
          title: this.$t('menuItem.NO'),
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          width: 40,
        },
        {
          title: this.$t('menuItem.Die'),
          dataIndex: 'dieNo',
          key: 'dieNo',
          align: 'center',
          width: 60,
          scopedSlots: {customRender: 'dieNo'},
        },
        {
          title: this.$t('menuItem.dieCnt'),
          dataIndex: 'dieCnt',
          key: 'dieCnt',
          align: 'center',
          width: 40,
          scopedSlots: {customRender: 'dieCnt'},
        },
        {
          title: this.$t('menuItem.DieLayer'),
          dataIndex: 'dieLayer',
          key: 'dieLayer',
          align: 'center',
          width: 80,
          scopedSlots: {customRender: 'dieLayer'},
        },
        {
          title: this.$t('menuItem.DieCode'),
          dataIndex: 'dieCode',
          key: 'dieCode',
          align: 'center',
          width: 80,
          scopedSlots: {customRender: 'dieCode'},
        },
        {
          title: this.$t('menuItem.Remarks'),
          dataIndex: 'remark',
          key: 'remark',
          align: 'center',
          width: 220,
          scopedSlots: {customRender: 'remark'},
        },
        {
          title: this.$t('btn.operation'),
          dataIndex: 'operation',
          key: 'operation',
          width: 80,
          align: 'center',
          scopedSlots: {customRender: 'operation'},
        },
      ],
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('JsRunLot', ['defeDetailDataSource','loadTable','defeDetailPagination', 'rowSelection','runLotsDefeDetailModalVisible','dieLayerList','dieCodeList', 'siteId']),
  },
  methods: {
    ...mapMutations('JsRunLot', ['setDataPagination','defeModalDetailCancel','addDetail','defeModalDetailConfirm','copyDefe', 'deleteDefe', 'initDieLayerData', 'initDieCodeData']),
    validDie(val){
      if(val){
        if(val.length > 10){
          message.warn("DieNo长度不得超过10");
        }
      }else {
        message.warn("DieNo不得为空");
      }
    },
    getDieCnt(val){
      if(!val.dieNo){
        return;
      }

      let inTrx = {
        trxId: "runingLot",
        actionFlg: "DIENO",
        dieNo : val.dieNo
      };
      SendMsg.sendPostTrx(inTrx).then((res) => {
        let outTrx = res.data;
        if ('0000000' === outTrx.rtnCode) {
          debugger
          if(outTrx.dieNoError){
            message.warn(outTrx.dieNoError)
          }else {
            val.dieCnt = outTrx.dieCnt
            this.$forceUpdate()
          }
        }
      })
    },
    refresh(val, dieCnt){
      debugger
      dieCnt = val;
      this.$forceUpdate()
    }
  },

  mounted(){
    this.initDieCodeData()
    this.initDieLayerData()
  }
}
</script>

<style scoped>

</style>
